/**
 * Created by vector on 2017/11/20.
 * 所有告警信息页面
 */
import React from 'react';
import {
    View,
    Text,
    ToastAndroid,
    StyleSheet,
    StatusBar,
    TouchableOpacity,
    Image,
    Dimensions,
    ListView,
    Modal,
    TextInput
} from 'react-native';

const {height, width} = Dimensions.get('window');
const AllWarnInfoDataApi = "http://192.168.1.104:8087/v1/errorDatas";
const putDealTextApi = "http://192.168.1.104:8087/v1/errorDatas?";
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class WarnInfo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: ds.cloneWithRows([]),
            modalVisible:false,
            modelTitle:'',
            e_id:'',
            dealText:''
        };
    }

    componentWillMount() {
        this.getDataFromApi();
    }


    async getDataFromApi() {
        try {
            let response = await fetch(AllWarnInfoDataApi);
            let responseJson = await response.json();

            this.setState({
                dataSource:ds.cloneWithRows(responseJson)
            });

            console.log(responseJson);
        }
        catch (error){
            ToastAndroid.showWithGravity(
                '网络错误',
                ToastAndroid.SHORT,
                ToastAndroid.CENTER
            )
        }
    }

    back() {
        this.props.callback();
        this.props.navigator.pop();
    }

    setModalVisible(modelTitle,e_id) {
        this.setState({
            modalVisible: true,
            modelTitle:modelTitle,
            dealText:'',
            e_id:e_id
        });
    }

    setModelInvisible() {
        this.setState({modalVisible: false});

    }

    async putDealText() {
        uri = putDealTextApi+"e_id="+this.state.e_id+"&resolved_way="+this.state.dealText;
        console.log(uri);

        try {
            let response = await fetch(uri,{method:'put'});
            let responseJson = await response.json();
            console.log(responseJson);

            if(responseJson.code === 200)
            {
                ToastAndroid.showWithGravity(
                    '处理成功',
                    ToastAndroid.SHORT,
                    ToastAndroid.CENTER
                );

                this.setModelInvisible();
                this.getDataFromApi();
            }
            else
            {
                ToastAndroid.showWithGravity(
                    '处理失败',
                    ToastAndroid.SHORT,
                    ToastAndroid.CENTER
                )
            }
        }
        catch (error){
            ToastAndroid.showWithGravity(
                '网络错误',
                ToastAndroid.SHORT,
                ToastAndroid.CENTER
            )
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    backgroundColor="rgb(28,28,29)"
                    barStyle="light-content"
                />
                <View style={styles.navView}>
                    <TouchableOpacity activeOpacity={0.5} onPress={this.back.bind(this)}>
                        <Image source={require('./icon/nav_back_icon.png')} style={styles.navIconLeft}/>
                    </TouchableOpacity>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                        <Text style={{color:'#ffffff',fontSize:25}}>
                            告警信息
                        </Text>

                        <Text style={{color:'rgb(201,203,204)',paddingTop:10,fontSize:16,paddingLeft:4}}>
                            {this.state.summary}
                        </Text>
                    </View>
                    <View style={styles.navIconRight}>
                    </View>
                </View>
                <View style={styles.bottomView}>
                    <ListView
                        automaticallyAdjustContentInsets={false}
                        dataSource={this.state.dataSource}
                        style={{marginTop:22}}
                        enableEmptySections={true}
                        renderRow={(rowData) => {
                            return(
                                <View style={{width:width,height:140,backgroundColor:'rgb(39,41,46)',marginBottom:20}}>
                                    <View style={{flexDirection:'column',backgroundColor:'rgb(39,41,46)',width:width-50,height:120,marginLeft:25}}>
                                        <View style={{flexDirection:'row',alignItems:'center',height:70}}>
                                            <Image source={rowData.is_resolved===1?require('./icon/deal_icon.png'):require('./icon/warn_icon.png')} style={{width:50,height:50}}/>
                                            <View style={{flexDirection:'column',justifyContent:'center',height:70,width:(width-100)*0.6}}>
                                                <Text style={{color:'#ffffff',fontSize:20,paddingLeft:10}}>
                                                    {rowData.program_name}
                                                </Text>
                                                <Text style={{color:'#ffffff',fontSize:16,paddingLeft:10}}>
                                                    {rowData.happen_time}
                                                </Text>
                                            </View>
                                            <View style={{width:(width-100)*0.4,height:70,flexDirection:'row',alignItems:'center',justifyContent:'flex-end'}}>
                                               <TouchableOpacity activeOpacity={0.5} onPress={rowData.is_resolved===1?null:this.setModalVisible.bind(this,rowData.program_name,rowData.e_id)}>
                                                <View style={rowData.is_resolved===1?styles.dealButtonView:styles.warnButtonView}>
                                                   <Text style={rowData.is_resolved===1?styles.dealButtonText:styles.warnButtonText}>
                                                       {rowData.is_resolved===1?'已解除':'解除'}
                                                   </Text>
                                               </View>
                                               </TouchableOpacity>
                                            </View>
                                        </View>
                                        <View style={{flexDirection:'row',alignItems:'center',height:40}}>
                                            <Text style={{fontSize:20,color:'rgb(127,129,130)',marginLeft:60}}>
                                                {rowData.error_type}
                                            </Text>
                                        </View>
                                    </View>
                                </View>
                            )
                        }}
                    />
                </View>

                <Modal
                    animationType={"fade"}
                    transparent={true}
                    visible={this.state.modalVisible}
                    onRequestClose={() => {alert("Modal has been closed.")}}
                >
                    <View style={{width:width,height:height,backgroundColor:'rgba(0,0,0,0.8)'}}>
                        <View style={{width:width-30,marginLeft:15,height:height,flexDirection:'column',alignItems:'center',marginTop:60}}>

                            <View style={{width:width-30,height:50,marginTop:30,flexDirection:'row',alignItems:'center'}}>
                                <View style={{width:(width-30)/3,height:50}}>

                                </View>

                                <TouchableOpacity style={{width:(width-30)/3}} onPress={this.putDealText.bind(this)}>
                                    <View style={{backgroundColor:'rgb(22,82,200)',width:130,height:50,borderRadius:0,flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                                        <Text style={{color:'#ffffff',fontSize:25,textAlign:'center'}}>
                                            提交
                                        </Text>
                                    </View>
                                </TouchableOpacity>


                                <View style={{width:(width-30)/3,height:50,flexDirection:'row',justifyContent:'flex-end'}}>
                                    <TouchableOpacity activeOpacity={0.5} onPress={this.setModelInvisible.bind(this)}>
                                    <Image source={require('./icon/exit.png')} style={{width:40,height:40}}/>
                                    </TouchableOpacity>
                                </View>

                            </View>

                            <View style={{backgroundColor:'rgb(34,36,41)',width:width-30,height:300,marginTop:30,flexDirection:'column',}}>
                                <Text style={{color:'#ffffff',fontSize:25,marginTop:18,marginLeft:18}}>{this.state.modelTitle}</Text>
                                <View style={{width:width-50,height:200,marginLeft:10,marginTop:20,backgroundColor:'rgb(47,50,57)',borderRadius:8,}}>
                                    <TextInput
                                        style={{color:'#ffffff',fontSize:18,}}
                                        multiline={true}
                                        numberOfLines={5}
                                        underlineColorAndroid="transparent"
                                        placeholder="请输入处理内容"
                                        onChangeText={(dealText) => this.setState({ dealText })}
                                    />
                                </View>
                            </View>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    navView: {
        backgroundColor:'rgb(28,28,29)',
        width:width,
        height:50,
        flexDirection:'row',
        alignItems:'center',
    },
    navIconLeft: {
        width:40,
        height:40,
        marginLeft:10,
    },
    navIconRight: {
        width:28,
        height:28,
        marginRight:20
    },
    bottomView:{
        backgroundColor:'rgb(28,28,29)',
        flex:1
    },
    warnButtonView:{
        width:70,
        height:35,
        borderRadius:3,
        borderWidth:2,
        borderColor:'rgb(20,91,235)',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'
    },
    warnButtonText:{
        fontSize:18,
        color:'rgb(20,91,235)',
        textAlign:'center'
    },
    dealButtonView:{
        width:70,
        height:35,
        borderRadius:3,
        borderWidth:2,
        borderColor:'rgb(61,64,71)',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'
    },
    dealButtonText:{
        fontSize:18,
        color:'rgb(61,64,71)',
        textAlign:'center'
    }

});